<template>
  <div id="flight-order-detail" class="mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb">
        <li class="breadcrumb-item ms-2">
          <router-link to="/h5/flt/orders">机票订单</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">详情</li>
        <span class="ms-auto me-2" @click.stop="back()">返回</span>
      </ol>
    </nav>

    <template v-if="detail !== null">
      <div class="card">
        <div class="card-header py-0">
          <dl class="row">
            <dt class="col-4 text-end">订单号</dt>
            <dd class="col-8">
              {{ detail.orderNo }}
              <span class="text-danger" v-if="detail.gpTicket === 1">GP</span>
            </dd>
            <dt class="col-4 text-end">客户</dt>
            <dd class="col-8">
              {{ showCustomerName(detail) }}
            </dd>
            <dt class="col-4 text-end">状态</dt>
            <dd class="col-8">{{ getStatusDesc(detail.status) }}</dd>
          </dl>
        </div>

        <template
          v-if="
            detail.noticeContent !== null &&
            detail.noticeContent.length > 0 &&
            detail.noticeConfirmed === 0
          "
        >
          <div class="card-body bg-primary text-white">通知</div>
          <div class="card-body">
            <dl class="row">
              <dt class="col-4 text-end">类型</dt>
              <dd class="col-8">{{ detail.noticeType }}</dd>
              <dt class="col-4 text-end">内容</dt>
              <dd class="col-8">{{ detail.noticeContent }}</dd>
              <dt class="col-4 text-end">时间</dt>
              <dd class="col-8">{{ detail.noticeTime }}</dd>
            </dl>
            <button class="btn btn-primary float-end" @click.stop="gotNotice()">
              已读
            </button>
          </div>
        </template>

        <div class="card-body px-0 pt-0">
          <ul class="nav nav-tabs nav-bordered mb-3" id="myTab" role="tablist">
            <li class="nav-item">
              <a
                class="nav-link active"
                id="order-tab"
                data-bs-toggle="tab"
                href="#orderDetailTab"
                role="tab"
                aria-controls="home"
                aria-selected="true"
                >订单信息</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-link"
                id="misc-tab"
                data-bs-toggle="tab"
                href="#miscTab"
                role="tab"
                aria-controls="home"
                aria-selected="true"
                >其它信息</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-link"
                id="pnr-tab"
                data-bs-toggle="tab"
                href="#pnrDetailTab"
                role="tab"
                aria-controls="pnr"
                aria-selected="false"
                >编码内容</a
              >
            </li>
            <li
              class="nav-item"
              v-if="detail !== null && detail.smsDetails.length > 0"
            >
              <a
                class="nav-link"
                id="sms-tab"
                data-bs-toggle="tab"
                href="#smsDetailTab"
                role="tab"
                aria-controls="sms"
                aria-selected="false"
                >短信({{ detail.smsDetails.length }})</a
              >
            </li>
            <li
              class="nav-item"
              v-if="detail !== null && detail.refunds.length > 0"
            >
              <a
                class="nav-link"
                id="refund-tab"
                data-bs-toggle="tab"
                href="#refundTab"
                role="tab"
                aria-controls="refund"
                aria-selected="false"
                >退票({{ detail.refunds.length }})</a
              >
            </li>
            <li
              class="nav-item"
              v-if="detail !== null && detail.changes.length > 0"
            >
              <a
                class="nav-link"
                id="change-tab"
                data-bs-toggle="tab"
                href="#changeTab"
                role="tab"
                aria-controls="change"
                aria-selected="false"
                >改签({{ detail.changes.length }})</a
              >
            </li>
            <li
              class="nav-item"
              v-if="detail !== null && detail.services.length > 0"
            >
              <a
                class="nav-link"
                id="service-tab"
                data-bs-toggle="tab"
                href="#serviceTab"
                role="tab"
                aria-controls="service"
                aria-selected="false"
                >服务及保险({{ detail.services.length }})</a
              >
            </li>
          </ul>
          <div class="tab-content" id="myTabContent">
            <div
              class="tab-pane fade show active"
              id="orderDetailTab"
              role="tabpanel"
              aria-labelledby="order-tab"
              v-if="detail !== null"
            >
              <div class="card-body bg-primary text-white m-0 py-1">
                航班信息
              </div>
              <table class="table table-striped table-hover table-sm">
                <thead>
                  <tr>
                    <th>出发</th>
                    <th>到达</th>
                    <th>日期</th>
                    <th>航班号</th>
                    <th>起飞</th>
                    <th class="d-none d-md-table-cell">落地</th>
                    <th>舱位</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="info in detail.flights" :key="info.id">
                    <td>
                      {{ info.dportName }} {{ info.dterm }}
                      <span class="d-none d-md-inline">{{ info.dport }} </span>
                    </td>
                    <td>
                      {{ info.aportName }} {{ info.aterm }}
                      <span class="d-none d-md-inline"> {{ info.aport }}</span>
                    </td>
                    <td>{{ info.ddate }}</td>
                    <td>{{ info.flightNo }}</td>
                    <td>{{ info.dtime }}</td>
                    <td class="d-none d-md-table-cell">{{ info.atime }}</td>
                    <td>{{ info.subclass }}</td>
                  </tr>
                </tbody>
              </table>
              <div class="card-body bg-primary text-white m-0 py-1">
                乘客信息
              </div>
              <table class="table table-striped table-hover table-sm">
                <thead>
                  <tr>
                    <th>姓名</th>
                    <th class="d-none d-md-table-cell">证件号</th>
                    <th class="d-none d-md-table-cell">手机号</th>
                    <th>票号</th>
                    <td></td>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(info, index) in detail.passengers" :key="info.id">
                    <td>{{ info.name }}</td>
                    <td class="d-none d-md-table-cell">{{ info.idNo }}</td>
                    <td class="d-none d-md-table-cell">{{ info.mobile }}</td>
                    <td>{{ info.ticketNo }}</td>
                    <td class="px-0">
                      <template v-if="detail.status === 0">
                        <a
                          href="javascript:void(0)"
                          @click.stop="editPsg(index)"
                          class="small ms-auto me-auto d-none"
                          >修改</a
                        >
                      </template>
                      <template v-if="detail.status === 32">
                        <a
                          href="javascript:void(0)"
                          @click.stop="changeTicket(index)"
                          class="btn btn-sm btn-warning ms-auto"
                          >改签</a
                        >
                        <a
                          href="javascript:void(0)"
                          @click.stop="multiRefundTicket(index)"
                          class="btn btn-sm btn-danger ms-auto"
                          >退票</a
                        >
                      </template>

                      <a
                        href="javascript:void(0)"
                        @click.stop="sendSms(index)"
                        class="btn btn-sm btn-info ms-auto"
                        >短信</a
                      >
                    </td>
                  </tr>
                </tbody>
              </table>
              <div class="card-body bg-primary text-white m-0 py-1">
                价格信息
              </div>
              <div class="card-body m-0 p-0">
                <template v-if="priceEditing === 0">
                  <table class="table table-striped table-hover table-sm">
                    <thead>
                      <tr>
                        <th></th>
                        <th class="d-none d-md-table-cell">票面价</th>
                        <th>销售价</th>
                        <th>税</th>
                        <th class="d-none d-md-table-cell">保险费</th>
                        <th>服务费</th>
                        <th class="d-none d-sm-table-cell">航司代理费</th>
                        <th class="d-none d-sm-table-cell">自定代理费</th>
                        <th class="d-sm-none">代理费</th>
                        <th class="d-none d-md-table-cell">让利</th>
                        <th class="d-none d-md-table-cell">人数</th>
                        <th class="d-none d-md-table-cell">应收</th>
                        <th class="d-none d-md-table-cell">成本</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-if="detail.adultCount > 0">
                        <td>成人</td>
                        <td class="d-none d-md-table-cell">
                          {{ adultPrice.price }}
                        </td>
                        <td>{{ adultPrice.parValue }}</td>
                        <td>{{ adultPrice.tax }}</td>
                        <td class="d-none d-md-table-cell">
                          {{ adultPrice.insurance }}
                        </td>
                        <td>{{ adultPrice.serviceCharge }}</td>
                        <td class="d-none d-sm-table-cell">
                          {{ adultPrice.commission }}
                        </td>
                        <td class="d-none d-sm-table-cell">
                          {{ adultPrice.commission2 }}
                        </td>
                        <td class="d-sm-none">
                          {{ adultPrice.commission }}/{{
                            adultPrice.commission2
                          }}
                        </td>
                        <td class="d-none d-md-table-cell">
                          {{ adultPrice.discount }}
                        </td>
                        <td class="d-none d-md-table-cell">
                          {{ adultPrice.ticketCount }}
                        </td>
                        <td class="d-none d-md-table-cell">
                          {{ adultPrice.amount }}
                        </td>
                        <td class="d-none d-md-table-cell">
                          {{ adultPrice.cost }}
                        </td>
                      </tr>
                      <tr v-if="detail.childCount > 0">
                        <td>儿童</td>
                        <td>{{ childPrice.price }}</td>
                        <td>{{ childPrice.parValue }}</td>
                        <td>{{ childPrice.tax }}</td>
                        <td>{{ childPrice.serviceCharge }}</td>
                        <td>{{ childPrice.commission }}</td>
                        <td>{{ childPrice.discount }}</td>
                        <td class="d-none">{{ childPrice.ticketCount }}</td>
                        <td class="d-none">{{ childPrice.amount }}</td>
                        <td class="d-none">{{ childPrice.cost }}</td>
                      </tr>
                    </tbody>
                  </table>
                  <table class="table a">
                    <tbody>
                      <tr>
                        <td>总计: {{ detail.totalAmount }}</td>
                        <td>成本: {{ detail.totalCost }}</td>
                        <td>利润: {{ detail.profit }}</td>
                      </tr>
                    </tbody>
                  </table>
                </template>
                <template v-else>
                  <my-price-input
                    psgTypeName="成人"
                    key="adultPriceInput"
                    v-bind.sync="adultPrice"
                    v-if="detail.adultCount > 0"
                  ></my-price-input>

                  <my-price-input
                    psgTypeName="儿童"
                    key="childPriceInput"
                    v-bind.sync="childPrice"
                    v-if="detail.childCount > 0"
                  ></my-price-input>

                  <my-price-input
                    psgTypeName="婴儿"
                    key="infantPriceInput"
                    v-bind.sync="infantPrice"
                    v-if="detail.infantCount > 0"
                  ></my-price-input>

                  <table class="table table-sm">
                    <tr>
                      <td class="text-center">
                        <button
                          class="btn btn-primary"
                          @click.stop="saveNewPrice()"
                        >
                          保存
                        </button>
                        <button
                          class="btn btn-secondary btn-sm ms-3"
                          @click.stop="cancelEditPrice()"
                        >
                          取消
                        </button>
                      </td>
                    </tr>
                  </table>
                </template>
              </div>
            </div>
            <div
              class="tab-pane fade show"
              id="miscTab"
              role="tabpanel"
              aria-labelledby="misc-tab"
              v-if="detail !== null"
            >
              <dl class="row">
                <dt class="col-4 text-end">编码</dt>
                <dd class="col-8">{{ detail.pnrNo }}</dd>

                <template v-if="detail.status !== 32">
                  <dt class="col-4 text-end">出票时限</dt>
                  <dd class="col-8">{{ detail.tktl }}</dd>
                </template>

                <dt class="col-4 text-end">预订人</dt>

                <dd class="col-8">{{ detail.operator }}</dd>
                <dt class="col-4 text-end">开票人</dt>
                <dd class="col-8">{{ detail.ticketer }}</dd>
                <dt class="col-4 text-end">收款方式</dt>
                <dd class="col-8">{{ getPayTypeDesc(detail.payType) }}</dd>
                <dt class="col-4 text-end">收款备注</dt>
                <dd class="col-8">{{ detail.payRemark }}</dd>
                <dt class="col-4 text-end">供应商</dt>
                <dd class="col-8">
                  <template v-if="detail.supplier !== null">{{
                    detail.supplier.name
                  }}</template>
                </dd>
                <dt class="col-4 text-end">支付方式</dt>
                <dd class="col-8">
                  <template v-if="detail.paymentMethod !== null">{{
                    detail.paymentMethod.name
                  }}</template>
                </dd>
                <dt class="col-4 text-end">出票日期</dt>
                <dd class="col-8">{{ detail.etdzDate }}</dd>
                <dt class="col-4 text-end">收款状态</dt>
                <dd class="col-8">
                  <span class="text-danger" v-if="detail.payStatus === 0"
                    >未收款</span
                  >
                  <span class="text-info" v-else-if="detail.payStatus === 1"
                    >已收款</span
                  >
                  <span class="text-primary" v-else-if="detail.payStatus === 2"
                    >已销账</span
                  >
                </dd>
                <dt class="col-4 text-end">订单状态</dt>
                <dd class="col-8">{{ getStatusDesc(detail.status) }}</dd>
                <dt class="col-4 text-end">联系人</dt>
                <dd class="col-8">{{ detail.linkman }}</dd>
                <dt class="col-4 text-end">联系电话</dt>
                <dd class="col-8">{{ detail.linkPhone }}</dd>
                <dt class="col-4 text-end">地址</dt>
                <dd class="col-8">{{ detail.address }}</dd>
                <dt class="col-4 text-end">备注</dt>
                <dd class="col-8">{{ detail.remark }}</dd>

                <dt class="col-4 text-end">发票</dt>
                <dd class="col-8">
                  {{ getItineraryTypeDesc(detail.itineraryType) }}
                </dd>
              </dl>
            </div>
            <div
              class="tab-pane fade"
              id="pnrDetailTab"
              role="tabpanel"
              aria-labelledby="pnr-tab"
              v-if="detail !== null"
            >
              <div
                class="card-block bg-faded"
                v-if="detail.pnrDetail != null"
                style="padding: 0"
              >
                <div v-html="'<pre>' + detail.pnrDetail + '</pre>'"></div>
              </div>
            </div>
            <div
              class="tab-pane fade"
              id="smsDetailTab"
              role="tabpanel"
              aria-labelledby="sms-tab"
              v-if="detail !== null && detail.smsDetails.length > 0"
            >
              <sms-detail-list :dataList="detail.smsDetails"></sms-detail-list>
            </div>
            <div
              class="tab-pane fade"
              id="refundTab"
              role="tabpanel"
              aria-labelledby="refund-tab"
              v-if="detail !== null && detail.refunds.length > 0"
            >
              <flight-refund-list
                :dataList="detail.refunds"
              ></flight-refund-list>
            </div>
            <div
              class="tab-pane fade"
              id="changeTab"
              role="tabpanel"
              aria-labelledby="change-tab"
              v-if="detail !== null && detail.changes.length > 0"
            >
              <flight-change-list
                :dataList="detail.changes"
              ></flight-change-list>
            </div>
            <div
              class="tab-pane fade"
              id="serviceTab"
              role="tabpanel"
              aria-labelledby="service-tab"
              v-if="detail !== null && detail.services.length > 0"
            >
              <vas-order-list :dataList="detail.services"></vas-order-list>
            </div>
          </div>
        </div>

        <!-- function button -->
        <div class="card-body row">
          <button
            class="btn btn-primary btn-sm mb-2"
            :disabled="btnDisabled"
            @click.stop="submitOrder()"
            v-if="detail.status === 0"
          >
            申请开票
          </button>
          <button
            class="btn btn-success btn-sm mb-2"
            @click.stop="approveOrder()"
            v-if="detail.status === 1"
          >
            审批通过
          </button>
          <button
            class="btn btn-success btn-sm mb-2"
            :disabled="btnDisabled"
            @click.stop="toTicketOrder()"
            v-if="detail.status === 2"
          >
            我来开票
          </button>
          <button
            class="btn btn-primary btn-sm mb-2"
            @click.stop="fillTicketNo()"
            v-if="detail.status === 8"
          >
            填写票号
          </button>
          <button
            class="btn btn-success btn-sm mb-2"
            @click.stop="finishOrder()"
            v-if="detail.status === 16"
          >
            订单完成
          </button>

          <button
            class="btn btn-danger btn-sm mb-2"
            @click.stop="cancelOrder()"
            v-if="
              !(
                detail.status === 4 ||
                detail.status === 16 ||
                detail.status === 32
              )
            "
          >
            取消订单
          </button>
          <button
            class="btn btn-secondary btn-sm mb-2"
            @click.stop="editPrice()"
            v-if="
              detail.status === 0 || detail.status === 8 || detail.status === 16
            "
          >
            修改价格
          </button>

          <button
            class="btn btn-primary btn-sm mb-2"
            @click.stop="fillTicketNo()"
            v-if="detail.status === 16"
          >
            修改票号
          </button>

          <div class="btn-group px-0 mb-2">
            <button
              type="button"
              class="btn btn-secondary btn-sm dropdown-toggle"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              更改
            </button>
            <ul class="dropdown-menu">
              <li v-if="detail.status === 8 || detail.status === 16">
                <button
                  class="dropdown-item"
                  type="button"
                  @click.stop="editTicketSupplier()"
                >
                  供应商
                </button>
              </li>
              <li v-if="detail.status === 0">
                <button
                  class="dropdown-item"
                  type="button"
                  @click.stop="editCustomer()"
                >
                  客户
                </button>
              </li>
              <li v-if="detail.status === 8 || detail.status === 16">
                <button
                  class="dropdown-item"
                  type="button"
                  @click.stop="editTicketPaymentMethod()"
                >
                  支付方式
                </button>
              </li>
              <li v-if="detail.status === 8 || detail.status === 16">
                <button
                  class="dropdown-item"
                  type="button"
                  @click.stop="editPnrNo()"
                >
                  编码
                </button>
              </li>
              <li v-if="detail.status === 8">
                <button
                  class="dropdown-item"
                  type="button"
                  @click.stop="changeTicketer()"
                >
                  出票人
                </button>
              </li>
              <li v-if="detail.status === 0">
                <button
                  class="dropdown-item"
                  type="button"
                  @click.stop="editIntlTicket()"
                >
                  订单类型
                </button>
              </li>
              <li>
                <button
                  class="dropdown-item"
                  type="button"
                  @click.stop="editRemark()"
                >
                  备注
                </button>
              </li>
            </ul>
          </div>

          <button
            class="btn btn-sm btn-info mb-2"
            @click.stop="addExtraService()"
            v-if="detail.status !== 4"
          >
            增加服务
          </button>
          <router-link
            :to="`/h5/flt/order/` + detail.id + `/history`"
            class="btn btn-info btn-sm mb-2"
            >操作记录</router-link
          >
          <button
            class="btn btn-danger btn-sm me-auto"
            @click.stop="rollbackStatus()"
            v-if="
              isAdmin &&
              (detail.status === 16 ||
                (detail.payStatus !== 2 && detail.status === 32))
            "
          >
            回滚
          </button>
        </div>
      </div>
    </template>

    <my-modal-prompt ref="modalPrompt" :nullable="modalNullable">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-prompt>
    <my-modal-update-customer
      ref="updateCustomerModal"
    ></my-modal-update-customer>
    <my-modal-supplier-update
      ref="updateSupplierModal"
    ></my-modal-supplier-update>
    <my-modal-pay-method-update
      ref="updatePayMethodModal"
    ></my-modal-pay-method-update>
    <my-modal-fill-ticket-no ref="fillTicketNoModal"></my-modal-fill-ticket-no>
    <my-modal-update-passenger
      ref="updatePassengerModal"
    ></my-modal-update-passenger>
    <my-modal-refund-ticket-multi
      ref="multiRefundTicketModal"
    ></my-modal-refund-ticket-multi>
    <my-modal-change-ticket ref="changeTicketModal"></my-modal-change-ticket>
    <my-modal-op2-update ref="updateOp2Modal">
      <span slot="title">{{ modalTitle }}</span>
      <span slot="title2">{{ modalTitle2 }}</span>
    </my-modal-op2-update>
    <my-modal-change-date ref="updateDateModal">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-change-date>
    <my-modal-sms ref="modalSms" :nullable="modalNullable">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-sms>
    <my-modal-flight-price-update
      ref="modalPriceUpdate"
    ></my-modal-flight-price-update>
  </div>
</template>

<script>
import $ from "jquery";
import { SUPPLIER_FLIGHT } from "@/common/const.js";

import {
  updateFlightOrderPrice,
  updateFlightOrderPassenger,
  updateFlightOrderRemark,
  updateFlightOrderSupplier,
  updateFlightOrderTicket,
  cancelFlightOrder,
  submitFlightOrder,
  toticketFlightOrder,
  agreeFlightOrderCancelRequest,
  denyFlightOrderCancelRequest,
  finishFlightOrderDelivery,
  updateFlightOrderPaymentMethod,
  updateFlightOrderPnr,
  updateFlightOrderCustomer,
  finishFlightOrder,
  updateFlightOrderIntl,
  updateFlightOrderDeliveryDate,
  updateFlightOrderTicketer,
  gotFlightOrderNotice,
} from "@/api/flight.js";
import {
  searchFlightOrderDetail,
  outputFlightOrder2Bill,
  searchFlightOrderDetailByOrderNo,
  convertPriceInfo,
} from "@/api/flight.js";
import { approveFlightOrder } from "@/api/flight.js";
import {
  showFlightOrderStatus,
  showPayType,
  showPsgType,
  showIdTypeDesc,
  showItineraryType,
  showCustomerName,
} from "@/common/common.js";
import { createRefundOrderMulti } from "@/api/flight-refund.js";
import { createChangeOrderMulti } from "@/api/flight-change.js";
import { sendFlightOrderSms, sendFlightOrderApprovalSms } from "@/api/sms.js";
import { rollbackFlightOrderStatus } from "@/api/admin.js";
import PriceInfo from "@/common/PriceInfo.js";
import MyPriceInput from "@/components/flight-price-input.vue";
import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";
import MyModalSupplierUpdate from "@/components/modal/my-modal-supplier-update-v2.vue";
import MyModalPayMethodUpdate from "@/components/modal/my-modal-pay-method-update.vue";
import MyModalFillTicketNo from "@/components/modal/my-modal-fill-ticketno.vue";
import MyModalUpdatePassenger from "@/components/modal/my-modal-update-passenger.vue";
import MyModalRefundTicketMulti from "@/components/modal/my-modal-refund-ticket-multi.vue";
import MyModalChangeTicket from "@/components/modal/my-modal-change-ticket-multi-v2.vue";
import MyModalUpdateCustomer from "@/components/modal/my-modal-customer-update.vue";
import MyModalOp2Update from "@/components/modal/my-modal-op1-update.vue";
import MyModalChangeDate from "@/components/modal/my-modal-change-date.vue";
import MyModalSms from "@/components/modal/my-modal-sms.vue";
import MyModalFlightPriceUpdate from "@/components/modal/my-modal-flight-price-update.vue";

import FlightRefundList from "@/components/list/flight-order-refund-list_h5.vue";
import FlightChangeList from "@/components/list/flight-order-change-list_h5.vue";
import VasOrderList from "@/components/list/vas-order-list_h5.vue";
import SmsDetailList from "@/components/list/sms-detail-list_h5.vue";

export default {
  components: {
    MyPriceInput,
    MyModalPrompt,
    MyModalUpdateCustomer,
    MyModalSupplierUpdate,
    MyModalPayMethodUpdate,
    MyModalFillTicketNo,
    MyModalUpdatePassenger,
    MyModalRefundTicketMulti,
    MyModalChangeTicket,
    MyModalOp2Update,
    MyModalChangeDate,
    MyModalSms,
    MyModalFlightPriceUpdate,

    FlightRefundList,
    FlightChangeList,
    VasOrderList,
    SmsDetailList,
  },
  data() {
    return {
      detail: null,
      id: 0,
      orderNo: "",

      adultPrice: new PriceInfo(),
      childPrice: new PriceInfo(),
      infantPrice: new PriceInfo(),

      commentCount: 0, //留言数量

      priceEditing: 0,
      remark: "",
      extras: [],
      modalTitle: "",
      modalTitle2: "",
      modalNullable: false,

      btnDisabled: false,
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
    customerId: function () {
      if (
        this.detail === null ||
        this.detail.customer === undefined ||
        this.detail.customer === null
      ) {
        return 0;
      } else {
        return this.detail.customer.id;
      }
    },
    psgCount: function () {
      if (this.detail !== null) {
        return this.detail.passengers.length;
      } else {
        return 1;
      }
    },
    supplierId: function () {
      if (this.detail === null || this.detail.supplier === null) {
        return 0;
      } else {
        return this.detail.supplier.id;
      }
    },
    payMethodId: function () {
      if (this.detail === null || this.detail.paymentMethod === null) {
        return 0;
      } else {
        return this.detail.paymentMethod.id;
      }
    },
  },
  mounted: function () {
    this.$store.commit("setWorkMode", "h5");
    this.id = parseInt(this.$route.params.id);
    // console.log(this.id)
    // console.log(this.$route)
    if (this.id === 0) {
      this.orderNo = this.$route.query.orderNo;
      // console.log(this.orderNo)
    }
    this.searchOrderDetail();

    // 此处true需要加上，不加滚动事件可能绑定不成功
    // window.addEventListener("scroll", this.handleScroll, true);

    // this.$nextTick(function(){

    //   //代码保证this.$el在document中
    //   window.scrollTo(0,0)

    // })
  },
  updated: function () {
    $('[data-bs-toggle="tooltip"]').tooltip();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", {
        loading: false,
      });
    },
    searchOrderDetail: function () {
      if (this.id > 0) {
        searchFlightOrderDetail(this.id, (val) => {
          this.detail = val;
          this.setAdultPrice();
        });
      } else {
        searchFlightOrderDetailByOrderNo(this.orderNo, (v) => {
          this.detail = v;
          this.id = this.detail.id;
          this.setAdultPrice();
        });
      }
    },
    getStatusDesc: function (status) {
      return showFlightOrderStatus(status);
    },
    getPayTypeDesc: function (payType) {
      return showPayType(payType);
    },
    showPsgType: function (psgType) {
      return showPsgType(psgType);
    },
    setAdultPrice: function () {
      convertPriceInfo(this.detail.prices, 0, this.adultPrice);
      convertPriceInfo(this.detail.prices, 1, this.childPrice);
      convertPriceInfo(this.detail.prices, 2, this.infantPrice);

      this.adultPrice.ticketCount = this.detail.adultCount;
      this.childPrice.ticketCount = this.detail.childCount;
      this.infantPrice.ticketCount = this.detail.infantCount;

      this.adultPrice.calc();
      this.childPrice.calc();
      this.infantPrice.calc();
    },
    editPrice: function () {
      this.$refs.modalPriceUpdate.modal(this.adultPrice).then((v) => {
        // console.log(v)
        this.adultPrice = v;
        this.saveNewPrice();
      });
    },
    cancelEditPrice: function () {
      this.priceEditing = 0;
    },
    saveNewPrice: function () {
      const params = {
        adultCount: this.detail.adultCount,
        childCount: this.detail.childCount,
        infantCount: this.detail.infantCount,
        adultPrice: this.adultPrice,
        childPrice: this.childPrice,
        infantPrice: this.infantPrice,
      };

      const str = JSON.stringify(params);

      updateFlightOrderPrice(this.id, str, (jsonResult) => {
        this.commonShowMessage(jsonResult);
        if (jsonResult.status === "OK") {
          this.priceEditing = 0;
          this.showErrMsg("操作成功");
        } else {
          this.showErrMsg("操作失败", "danger");
        }
      });
    },
    editPsg: function (index) {
      this.$refs.updatePassengerModal
        .modal(this.detail.passengers[index])
        .then((info) => {
          updateFlightOrderPassenger(this.id, info, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editRemark: function () {
      this.modalTitle = "请输入新的备注：";
      this.modalNullable = false;
      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          updateFlightOrderRemark(
            this.id,
            {
              remark: remark,
            },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    cancelOrder: function () {
      this.modalTitle = "请输入取消订单的理由：";
      this.modalNullable = false;
      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          cancelFlightOrder(
            this.id,
            {
              reasonDesc: remark,
            },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    submitOrder: function () {
      this.btnDisabled = true;
      this.showLoading("处理中");
      submitFlightOrder(
        this.id,
        (v) => this.commonShowMessage(v),
        () => {
          this.btnDisabled = false;
          this.hideLoading();
        }
      );
    },
    approveOrder: function () {
      this.showLoading("处理中");
      approveFlightOrder(
        this.id,
        (v) => this.commonShowMessage(v),
        () => this.hideLoading()
      );
    },
    toTicketOrder: function () {
      this.btnDisabled = true;
      this.showLoading("处理中");
      toticketFlightOrder(
        this.id,
        (v) => {
          this.commonShowMessage(v);
        },
        () => {
          this.btnDisabled = false;
          this.hideLoading();
        }
      );
    },
    finishOrder: function () {
      // 此处允许修改出票日期
      this.modalTitle = "请输入出票日期（默认当天)：";
      this.$refs.updateDateModal
        .modal()
        .then((remark) => {
          finishFlightOrder(
            this.id,
            {
              etdzDate: remark,
            },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    outputBillInfo: function () {
      outputFlightOrder2Bill(this.id, (v) => this.commonShowMessage(v));
    },
    editCustomer: function () {
      this.$refs.updateCustomerModal
        .modal(this.customerId)
        .then((info) => {
          updateFlightOrderCustomer(
            this.id,
            {
              customerId: info.customerId,
              costCenter: info.costCenter,
              projectName: info.projectName,
            },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editIntlTicket: function () {
      const intlTicket = this.detail.intlTicket;
      let newIntlTicket = 0;
      if (intlTicket === 0) {
        this.modalTitle = "确定更改为国际机票订单？";
        newIntlTicket = 1;
      } else {
        this.modalTitle = "确定更改为国内机票订单？";
        newIntlTicket = 0;
      }

      this.$refs.modalPrompt
        .modal("YesOrNo")
        .then((remark) => {
          // console.log(remark)
          // console.log(newIntlTicket)
          // this.doDeleteBill()
          updateFlightOrderIntl(
            this.id,
            {
              intlTicket: newIntlTicket,
            },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editTicketSupplier: function () {
      this.$refs.updateSupplierModal
        .modal(this.supplierId, this.payMethodId, SUPPLIER_FLIGHT)
        .then((info) => {
          const params = {
            supplierId: info.supplierId,
            paymentMethodId: info.paymentMethodId,
            autoTicketing: info.autoTicketing,
            price: info.price,
          };

          updateFlightOrderSupplier(this.id, params, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editTicketPaymentMethod: function () {
      this.$refs.updatePayMethodModal
        .modal(this.payMethodId)
        .then((info) => {
          updateFlightOrderPaymentMethod(
            this.id,
            {
              paymentMethodId: info.payMethodId,
            },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editPnrNo: function () {
      this.modalTitle = "修改编码：";
      this.modalNullable = false;
      this.$refs.modalPrompt
        .modal()
        .then((pnrNo) => {
          updateFlightOrderPnr(this.id, { pnrNo }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    fillTicketNo: function () {
      this.$refs.fillTicketNoModal
        .modal(this.detail.passengers)
        .then((info) => {
          updateFlightOrderTicket(this.id, JSON.stringify(info), (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    addExtraService: function () {
      this.$router.push({
        path: "/h5/new/vas/order",
        query: {
          flightOrderId: this.id,
        },
      });
    },
    denyCancelRequest: function () {
      this.modalTitle = "请输入拒绝理由：";
      this.modalNullable = false;
      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          const params = {
            reasonDesc: remark,
            requestId: this.detail.cancelRequest.id,
          };
          denyFlightOrderCancelRequest(this.id, params, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    agreeCancelRequest: function () {
      const params = {
        requestId: this.detail.cancelRequest.id,
      };
      agreeFlightOrderCancelRequest(this.id, params, (jsonResult) => {
        this.commonShowMessage(jsonResult);
      });
    },
    finishDelivery: function () {
      this.modalTitle = "请输入派送行程单备注：";
      this.modalNullable = false;
      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          finishFlightOrderDelivery(
            this.id,
            {
              remark: remark,
            },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    multiRefundTicket: function (index) {
      // 多人同时退废
      const psgInfo = this.detail.passengers[index];
      const psgType = psgInfo.psgType;

      let psgPrice;
      if (psgType === 0) {
        this.setAdultPrice();
        psgPrice = this.adultPrice;
      } else if (psgType === 1) {
        this.setChildPrice();
        psgPrice = this.childPrice;
      } else if (psgType === 2) {
        this.setInfantPrice();
        psgPrice = this.infantPrice;
      }

      // 找到同类型的乘机人：成人，儿童，婴儿
      const psgList = [];
      for (const info of this.detail.passengers) {
        if (info.psgType === psgType) {
          psgList.push({
            ticketNo: info.ticketNo,
            name: info.name,
            idNo: info.idNo,
            selected: false,
          });
        }
      }

      this.$refs.multiRefundTicketModal
        .modal(
          this.customerId,
          psgList,
          this.id,
          this.detail.orderNo,
          this.detail.flights,
          this.detail.intlTicket,
          psgPrice.amount,
          psgPrice.cost,
          psgPrice.parValue,
          psgPrice.tax
        )
        .then((info) => {
          this.doCreateRefundOrderMulti(info);
        })
        .catch((ex) => {});
    },
    doCreateRefundOrderMulti: function (info) {
      createRefundOrderMulti(JSON.stringify(info), (jsonResult) => {
        if (jsonResult.status !== "OK") {
          this.showErrMsg(jsonResult.errmsg, "danger");
        } else {
          this.showErrMsg("操作成功");
          this.$router.push("/h5/flt/refund/order/" + jsonResult.returnCode);
        }
      });
    },
    changeTicket: function (index) {
      // 多人同时签转
      const psgInfo = this.detail.passengers[index];
      const psgType = psgInfo.psgType;

      let psgPrice;
      if (psgType === 0) {
        this.setAdultPrice();
        psgPrice = this.adultPrice;
      } else if (psgType === 1) {
        this.setChildPrice();
        psgPrice = this.childPrice;
      } else if (psgType === 2) {
        this.setInfantPrice();
        psgPrice = this.infantPrice;
      }

      // 找到同类型的乘机人：成人，儿童，婴儿
      const psgList = [];
      for (const info of this.detail.passengers) {
        if (info.psgType === psgType) {
          psgList.push({
            ticketNo: info.ticketNo,
            name: info.name,
            idNo: info.idNo,
            selected: false,
          });
        }
      }

      const params = {
        customerId: this.customerId,
        orderId: this.id,
        orderNo: this.detail.orderNo,
        intlTicket: this.detail.intlTicket,
        oldPnrNo: this.detail.pnrNo,
        amount: psgPrice.amount,
        cost: psgPrice.cost,
        parvalue: psgPrice.parValue,
        tax: psgPrice.tax,
        flights: this.detail.flights,
      };
      this.$refs.changeTicketModal
        .modal(psgList, params)
        .then((v) => this.doCreateChangeOrder(v))
        .catch((ex) => {});
    },
    doCreateChangeOrder: function (info) {
      createChangeOrderMulti(JSON.stringify(info), (jsonResult) => {
        if (jsonResult.status !== "OK") {
          this.showErrMsg(jsonResult.errmsg, "danger");
        } else {
          this.showErrMsg("操作成功");
          this.$router.push("/h5/flt/change/order/" + jsonResult.returnCode);
        }
      });
    },
    commonShowMessage: function (jsonResult) {
      if (jsonResult.status !== "OK") {
        this.showErrMsg("失败：" + jsonResult.errmsg, "danger");
      } else {
        if (jsonResult.desc !== "") {
          this.showErrMsg(jsonResult.desc);
        } else {
          this.showErrMsg("操作成功");
        }
        this.searchOrderDetail();
      }
    },
    sendSms: function (index) {
      const psgInfo = this.detail.passengers[index];
      this.modalTitle = "发送短信";
      this.modalNullable = true;
      this.$refs.modalSms
        .modal(2, this.id, psgInfo.id)
        .then((v) => {
          // console.log(v.mobile, v.smsContent)
          sendFlightOrderSms(
            this.id,
            {
              psgId: psgInfo.id,
              mobileNo: v.mobile,
              smsContent: v.smsContent,
              smsFormat: v.smsFormat,
            },
            (v) => {
              this.commonShowMessage(v);
            }
          );
        })
        .catch((ex) => {});
    },
    updateDeliveryDate: function () {
      // 此处允许修改出票日期
      this.modalTitle = "请输入派送日期（格式：2017-1-28）：";
      this.$refs.updateDateModal
        .modal()
        .then((newDate) => {
          updateFlightOrderDeliveryDate(
            this.id,
            {
              deliveryDate: newDate,
            },
            (v) => {
              this.commonShowMessage(v);
            }
          );
        })
        .catch((ex) => {});
    },
    changeTicketer: function () {
      this.modalTitle = "更改出票人";
      this.modalTitle2 = "出票人";
      this.$refs.updateOp2Modal
        .modal(this.detail.ticketer)
        .then((info) => {
          // console.log(info)
          updateFlightOrderTicketer(
            this.id,
            {
              ticketer: info.op1,
            },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    rollbackStatus: function () {
      this.modalTitle = "确定将订单状态回滚到上一个嘛a？";

      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          rollbackFlightOrderStatus(this.id, { remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {
          console.log(ex);
        });
    },
    gotNotice: function () {
      //通知已读
      gotFlightOrderNotice(this.id, (v) => this.commonShowMessage(v));
    },
    showIdTypeDesc: function (idType) {
      return showIdTypeDesc(idType);
    },
    showPriceCheckedStatus: function (status) {
      if (status === 0) {
        return "未校验";
      } else if (status === 1) {
        return "已校验";
      } else if (status === 4) {
        return "自动校验失败";
      } else {
        return status;
      }
    },
    showApprovalStatus: function (status) {
      if (status === 0) {
        return "拒绝";
      } else if (status === 1) {
        return "同意";
      } else {
        return status;
      }
    },
    showVialationStatus: function (status) {
      if (status === 0) {
        return "符合规定";
      } else if (status === 1) {
        return "违反规定";
      } else {
        return status;
      }
    },
    getItineraryTypeDesc: function (itineraryType) {
      return showItineraryType(itineraryType);
    },
    showCustomerName: function (info) {
      return showCustomerName(info);
    },
    handleScroll() {
      let scrolltop =
        document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
    },
    goUp() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
  },
};
// 874
</script>
